<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="mui.min.js"></script>
    <link href="mui.min.css" rel="stylesheet"/>
    <style type="text/css">
    	.mui-slider img{
    		height: 300px;
    	}
    	
    </style>
</head>
<body>
	 <header class="mui-bar mui-bar-nav">
	 	<a id="back" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	  <h1 class="mui-title" style="color: red;">TPN MOLECULAR</h1>
	  </header>
	   <nav class="mui-bar mui-bar-tab">
    	<a href="#shouye" class="mui-tab-item mui-active" id="shouye">
    		<span class="mui-icon mui-icon-home"></span>
    		<span class="mui-tab-lable">首页</span>
    	</a>
    	<a href="" class="mui-tab-item">
    		<span class="mui-icon mui-icon-list"></span>
    		<span class="mui-tab-lable">分类</span>
    	</a>
    	<a href="" class="mui-tab-item">
    		<span class="mui-icon mui-icon-chatbubble"></span>
    		<span class="mui-tab-lable">会话</span>
    	</a>
    	<a href="#" class="mui-tab-item"  id="logoin">
    		<span class="mui-icon mui-icon-person"></span>
    		<span class="mui-tab-lable">我的</span>
    	</a>
    </nav>
	   <div class="mui-slider " style="width: auto;height: 300px;">
                     <div class="mui-slider-group mui-slider-loop">
                     	<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="5.jpg" /></a></div>
                           <div class="mui-slider-item"><a href="#"><img src="8.jpg" /></a></div>
                           <div class="mui-slider-item"><a href="#"><img src="9.jpg" /></a></div>
                           <div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>
                           <div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>
                           <div class="mui-slider-item"><a href="#"><img src="5.jpg" /></a></div>

                           <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="1.jpg" /></a></div>
                     </div>
                     <div class="mui-slider-indicator" style="color: wheat;">
                     	<div class="mui-indicator mui-active"></div>
                     	<div class="mui-indicator "></div>
                     	<div class="mui-indicator "></div>
                     	<div class="mui-indicator "></div>
                     	<div class="mui-indicator "></div>
                     </div>
                  </div>
                  <div style="height: 350px;width: auto">
                  	     <div style="background-color: #FB4C5A;width: 250px;height: 80px;float: left;padding: 10px;">
                  	     	<p style="color: white;font-size: 20px">￥<span style="font-size: 20px;"> <span style="font-size: 25px;">1180</span>.80</span></p>
                  	     	<p><span class="mui-icon mui-icon-locked" style="font-size: 18px;color: white;"></span><span style="font-size: 16px;color: white;">e家族秒杀</span>
                  	     		<span style="text-decoration: line-through;color: white;">￥2180</span>
                  	     	</p>
                  	     </div>
                  	     <div style="background-color: #F8A693;float: left;width: 108px;height: 80px;padding: 8px;">
                  	     	<p style="color: red;text-align: center;">结束还剩：</p>
                  	     	<p style="font-size: 14px;"><div class="time">
                                   <span id="t_d" style="color: white;">00天</span>
                                   <span id="t_h"  style="color: white;">00时</span>
                                   <span id="t_m" style="color: white;">00分</span>
                                   <span id="t_s" style="color: white;">00秒</span>
                                 </div>
                  	     	</p>
                  	     </div>
                  	     <div style="clear: both;"></div>
                  	     <div style="padding: 10px;">
                  	     	<p style="color: black;">雪润皙白冰肌水(雪润冰肌水) 适用肤质： 干性/油性/混合型  </p>
                  	     	<p style="color: red;">12日18点-13日18点，e家族秒杀尝鲜价1180.80元，两份再见10元</p>
                  	     </div>
                  	     <div style="padding: 10px;">
                  	     	<p style="float: left;">白条</p>
                  	     	<p style="float: left;color: black;">&nbsp;&nbsp;&nbsp;&nbsp;【白条支付】吉祥六期免息/12期西非5折</p>
                  	     </div>
                  	     <div style="padding: 10px; clear: both;">
                  	      
                  	         	<p style="float: left;">促销</p>
                  	        
                  	      <div style="float: left; margin-left: 20px;">
                  	         	<p style="color: black;"><span style="border: 1px solid red;color: red;">满减</span> <span>&nbsp;&nbsp;&nbsp;满150.00减10.00</span></p>
                  	         	<p style="color: black;"><span style="border: 1px solid red;color: red;">限制</span> <span>&nbsp;&nbsp;&nbsp;此价格不与套装优惠同时享受</span></p>
                  	         	<p style="color: black;"><span style="border: 1px solid red;color: red;">满格返券</span> &nbsp;&nbsp;&nbsp;<span style="border: 1px solid red;color: red;">限购</span></p>
                  	         </div>
                  	     </div>
                  </div>
                   <div style="width: auto; padding: 5px;">
                  	<img src="6.jpg"/>
                  	<p style="padding: 20px;">功      效： 洁净、软化角质、美白补水； 二次清洁，调理肌肤水油平衡；特有玛瑙石榴珍萃*，软化表皮角质并改善粗糙暗沉，均匀肤色，令肌肤透亮润泽； 喜马拉雅山小分子团冰川水，易吸收优化补水效果；辅以活性精华成分**，深层净白肌肤，并提升肌肤透亮度，令肌肤通透、焕亮、白皙。</p>
                  	<img src="7.jpg"/>
                  </div>
	 
</body>
<script src="logoin.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	mui.init({
  
});
mui('.mui-off-canvas-wrap').offCanvas('show');
//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider({
  interval:5000//自动轮播周期，若为0则不自动播放，默认为0；
});

function GetRTime(){
    var EndTime= new Date('2016/11/20 00:00:00');
    var NowTime = new Date();
    var t =EndTime.getTime() - NowTime.getTime();
    var d=0;
    var h=0;
    var m=0;
    var s=0;
    if(t>=0){
      d=Math.floor(t/1000/60/60/24);
      h=Math.floor(t/1000/60/60%24);
      m=Math.floor(t/1000/60%60);
      s=Math.floor(t/1000%60);
    }
 
 
    document.getElementById("t_d").innerHTML = d + "天";
    document.getElementById("t_h").innerHTML = h + "时";
    document.getElementById("t_m").innerHTML = m + "分";
    document.getElementById("t_s").innerHTML = s + "秒";
  }
  setInterval(GetRTime,0);
</script>
</html>